<template>
    <!-- 生产排产查询表 -->
    <el-card class="search-card">
        <el-form :searchForm label-width="80px" inline>
            <!-- el-form-item代表一行 -->
            <el-form-item label="工单编号">
                <!-- el-input是一个输入框 v-model用来绑定 placeholder是输入框里面的提示字 clearable是输入框里有文字时，输入框的末尾会出现一个小小的 “x” 图标 -->
                <el-input v-model="searchForm.procutionOrderCode" placeholder="工单编号" clearable/>
            </el-form-item>

            <el-form-item label="工单名称">
                <el-input v-model="searchForm.productionOrderName" placeholder="工单名称" clearable/>
            </el-form-item>

            <el-form-item label="单据来源">
                <!-- el-select是一个下拉框，el-option用来写选项 value用来存入form.stauts的值 -->
                <el-select v-model="searchForm.productionOrderSource" style="width: 120px;" placceholder="单据来源" clearable>
                <el-option label="客户订单" :value="1"/>
                <el-option label="库存备货" :value="2"/>
                </el-select>
            </el-form-item>

            <el-form-item label="物料编号">
                <el-input v-model="searchForm.material.code" placeholder="物料编号" clearable/>
            </el-form-item>
            
            <el-form-item label="物料名称">
                <el-input v-model="searchForm.material.name" placeholder="物料名称" clearable/>
            </el-form-item>

            <el-form-item label="客户编号">
                <el-input v-model="searchForm.customer.code" placeholder="客户编号" clearable/>
            </el-form-item>

            <el-form-item label="客户名称">
                <el-input v-model="searchForm.customer.name" placeholder="客户名称" clearable/>
            </el-form-item>

            <el-form-item label="工单类型">
                <el-select style="width: 120px" v-model="searchForm.productionOrderType" palceholder="工单类型" clearable>
                    <!--produtionOrderTypeDictDataList是字典对象，还没写  -->
                    <!-- v-for是一个循环
                     value就是数据库中对应的值
                     label就是展示给用户看的
                     key是一个必须写的东西，就相当于是value吧 -->
                    <el-option
                        v-for="dictData in produtionOrderTypeDictDataList"
                        :value="dictData.id"
                        :label="dictData.dictLabel"
                        :key="dictData.id"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
                <el-button @click="resetSearch" :icon="Refresh">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>


   
<!-- 显示信息的列表 -->
    <el-card class="table-card">
        <!-- @selection-change用来批量操作
         当表格中被复选框选中的行发生变化时，立即调用 handleSelectionChange 这个函数。 -->
        <el-table :data="productionOrderList" border stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column prop="productionOrderCode" label="工单编号"/>
            <el-table-column prop="productionOrderName" label="工单名称"/>
            <el-table-column prop="typeDictData.dictLabel" label="工单类型"/>
            <el-table-column prop="productionOrderSource" label="工单来源">
                <template #default="scope">
                    <!-- scop.row代表当前一行 -->
                    {{scope.row.productionOrderSource ==  1?'客户订单':'库存备货'}}
                </template>
            </el-table-column>
            <el-table-column prop="orderCode" label="订单编号"/>
            <el-table-column prop="material.code" label="产品/物料编号" />
            <el-table-column prop="material.name" label="产品/物料名称" />
            <el-table-column prop="material.specification" label="规格" />
            <el-table-column prop="material.unit.name" label="单位" />
            <el-table-column prop="productionOrderQuantity" label="工单数量" />
            <el-table-column prop="customer.code" label="客户编号" />
            <el-table-column prop="customer.name" label="客户名称" />
            <el-table-column prop="requestDate" label="需求日期" />
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    {{ scope.row.status == 30 ?'草稿': scope.row.status == 31?'已确认':scope.row.status == 32?'已审核':'不知道'}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                <el-button size="small" @click="handleScheduling(scope.row)" :icon="Edit">排产</el-button>
                </template>    
            </el-table-column>
        </el-table>
    </el-card>


    <!-- 排产弹窗 -->
    <el-dialog
        title="工单排产"
        v-model="isShowScheduling"
        width="80%"
        :close-on-click-modal="false">
    <el-form :model="schedulingForm" label-width="100px">
    <el-row :gutter="20">
        <el-col :span="8">
            <el-form-item label="工单编号">
                <el-input v-model="schedulingForm.productionOrderCode" readonly />
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="工单名称">
                <el-input v-model="schedulingForm.productionOrderName" readonly />
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="订单编号">
                <el-input v-model="schedulingForm.orderCode" readonly/>
            </el-form-item>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="8">
            <el-form-item label="来源类型">
                <el-radio-group v-model="schedulingForm.productionOrderSource" disabled>
                    <el-radio :label="1">客户订单</el-radio>
                    <el-radio :label="2">库存备货</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="排产状态">
                <el-select v-model="schedulingForm.status" disabled style="width: 100%;">
                    <el-option label="草稿" :value="30"/>
                    <el-option label="已确认" :value="31"/>
                    <el-option label="已审核" :value="32"/>
                    <el-option label="已完成" :value="33"/>
                </el-select>
            </el-form-item>
        </el-col>
         <el-col :span="8">
            <el-form-item label="工单数量">
                <el-input v-model="schedulingForm.productionOrderQuantity" readonly />
            </el-form-item>
        </el-col>
    </el-row>
    
    <el-divider content-position="left">产品信息</el-divider>

    <el-row :gutter="20">
        <el-col :span="8">
            <el-form-item label="产品编号">
                <el-input v-model="schedulingForm.material.code" readonly/>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="产品名称">
                <el-input v-model="schedulingForm.material.name" readonly />
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="规格型号">
                <el-input v-model="schedulingForm.material.specification" readonly/>
            </el-form-item>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="8">
            <el-form-item label="单位">
                <el-input v-model="schedulingForm.material.unit.name" readonly/>
            </el-form-item>
        </el-col>
        <el-col :span="8">
             <el-form-item label="客户编号">
                <el-input v-model="schedulingForm.customer.code" readonly/>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="客户名称">
                <el-input v-model="schedulingForm.customer.name" readonly/>
            </el-form-item>
        </el-col>
    </el-row>
    
    <el-divider />

    <el-row :gutter="20">
        <el-col :span="8">
            <el-form-item label="需求日期">
                <el-date-picker
                    v-model="schedulingForm.requestDate"
                    type="date"
                    placeholder="需求日期"
                    value-format="YYYY-MM-DD"
                    readonly
                    style="width: 100%;"
                />
            </el-form-item>
        </el-col>
        <el-col :span="16">
            <el-form-item label="备注">
                <el-input v-model="schedulingForm.material.remark" readonly/>
            </el-form-item>
        </el-col>
    </el-row>

    <el-divider content-position="left">工艺流程</el-divider>

    <WorkflowProcessByProduct 
        :materialId="schedulingForm.material.id"
        :productionOrderId="schedulingForm.id">
    </WorkflowProcessByProduct>
    
    </el-form>
    
    
    </el-dialog>

     <!-- 分页组件pagination -->
            <el-pagination
      v-if="pagination.total > 0"
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next"
      :total="pagination.total"
      @size-change="loadMaterialBom"
      @current-change="loadMaterialBom"
      style="margin-top: 15px; justify-content: flex-end;"
    />

</template>

<script setup>
import { ref, onMounted } from "vue";
// UI组件：从 element-plus 导入图标、消息提示和确认对话框
import { Plus, Search, Refresh, Edit, Delete, MessageBox, Check } from '@element-plus/icons-vue'
import { ElButton, ElMessage, ElMessageBox } from "element-plus";
// API函数：从我们自己写的 api 文件中，导入所有和后端交互的函数
import {
  getProductionOrderList, getAutoCode, addProductionOrder,
  updateProductionOrder, deleteProductionOrder, batchDeleteProductionOrder
} from "@/api/production-order.js";
import { getDictDataList } from "@/api/dictData.js";

import WorkflowProcessByProduct from "./WorkflowProcessByProduct.vue";

// ----------------------------------各种变量

// 主页面和查询相关
const getInitalSearchForm = ()=>({
    productionOrderCode:"", productionOrderName:"",
    material:{code:"",name:""},status:"",productionOrderSource:"",
    customer:{code:"",name:""},productionOrderType:""
});
const productionOrderList = ref([]);//主表格的数据，存储查询的数据
const searchForm = ref(getInitalSearchForm());//搜索表单的数据
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 }); //要定义分页的


// 排产弹窗
const isShowScheduling = ref(false);
const schedulingForm = ref({});

const selectedRow = ref([]);
const handleSelectionChange = (selection) =>{
    // selection 参数就是 Element Plus 传过来的、当前所有被选中行的数据组成的数组
    selectionRow.value = selection;
}


// 
const produtionOrderTypeDictDataList = ref([])//字典数据
const productionOrderStatusDictDataList = ref([]); // 工单状态字典


// -----------------------------------------页面主函数
// 处理主页面查询
const handleSearch =()=>{
    const params = {
        pageNum: pagination.value.currentPage,pageSize: pagination.value.pageSize,
        productionOrderCode: searchForm.value.productionOrderCode,
        productionOrderName: searchForm.value.productionOrderName,
        productionOrderSource: searchForm.value.productionOrderSource,
        productionOrderType: searchForm.value.productionOrderType,
        materialCode: searchForm.value.material.code,
        materialName: searchForm.value.material.name,
        status: searchForm.value.status,
        customerCode: searchForm.value.customer.code,
    };
    //调用接口中的查询方法
    getProductionOrderList(params).then(res=>{
        productionOrderList.value = res.data.list;
        pagination.value.total = res.data.total;
    }).catch(err =>{
        ElMessage.error('获取工单列表失败');
        productionOrderList.value = [];
        pagination.value.total = 0;
        console.log(err);
    })
}

//处理排产弹窗
const handleScheduling = (row)=>{
     console.log('点击“排产”时，选中的行数据是:', row);
    schedulingForm.value = {...row};
    isShowScheduling.value = true;
}
//--------------------------------------------页面辅助函数
const resetSearch= ()=>{
    searchForm.value = getInitalSearchForm();
    handleSearch();
}
//查询工单类型字典数据
const loadProductionOrderDictDataList = () => {
    getDictDataList({ dictType: "PRODUCTION_ORDER_TYPE" }).then(res => {
        produtionOrderTypeDictDataList.value = res.data.records;
    })
}


// ---------------------------------生命周期钩子
onMounted(() => {
    handleSearch();
    loadProductionOrderDictDataList(); // 再加载类型字典
    
})
</script>

<style scoped>

</style>